<template>
    <div class="SCpercentWrap">
        <div class="SCpercentHeader">统计时间：<span>2019-07-25 20:24</span></div>
        <div class="SCpercentTwo">
            <span class="SCpercentTwoA">转化率</span>
            <!--点击显示日期选择框-->
            <span @click="showDataS" class="SCpercentTwoB noselect" data-isshow="1">日期 <img data-isshow="1" src="./../../assets/img/shopCenter/SCpercentData.png" alt=""></span>
            <span class="SCpercentTwoC">2019-07-25</span>
            <!--第二块日期选择显示框-->
            <!--点击显示相应数据-->
            <div class="SCPercentDataS" :id="isSCPercentDataS? 'Block':'None'">
                <p @click="SCPercentDataS(1)">今日</p>
                <p @click="SCPercentDataS(2)">昨日</p>
                <p @click="SCPercentDataS(3)">最近一周</p>
                <p @click="SCPercentDataS(4)">最近一月</p>
            </div>
        </div>

        <!--转化率中心内容-->
        <div class="SCpercentCenter">
            <div class="SCpercentCenterLeft">
                <!--第一行-->
                <div class="SCpercentOneDiv">
                    <div class="SCpercentDiv">
                        <div class="SCpercentDivA">
                            <span class="SCpercentOneDivColor">1003</span>
                            <img src="" alt="">
                            <span class="SCpercentOneDivColor">12.07%</span>
                        </div>
                        <p class="SCpercentDivB SCpercentOneDivColor">访客数</p>
                    </div>
                </div>
                <!--第二行-->
                <div class="SCpercentTwoDiv" style="margin: 2px 0;">
                    <div class="SCpercentDiv">
                        <div class="SCpercentDivA">
                            <span class="SCpercentTwoDivColor">1003</span>
                            <img src="" alt="">
                            <span class="SCpercentTwoDivColor">12.07%</span>
                        </div>
                        <p class="SCpercentDivB SCpercentTwoDivColor">访客数</p>
                    </div>
                    <div class="SCpercentDiv">
                        <div class="SCpercentDivA">
                            <span class="SCpercentTwoDivColor">1003</span>
                            <img src="" alt="">
                            <span class="SCpercentTwoDivColor">12.07%</span>
                        </div>
                        <p class="SCpercentDivB SCpercentTwoDivColor">访客数</p>
                    </div>
                </div>
                <!--第三行-->
                <div class="SCpercentThreeDiv">
                    <div class="SCpercentDiv">
                        <div class="SCpercentDivA">
                            <span class="SCpercentThreeDivColor">1003</span>
                            <img src="" alt="">
                            <span class="SCpercentThreeDivColor">12.07%</span>
                        </div>
                        <p class="SCpercentDivB SCpercentThreeDivColor">访客数</p>
                    </div>
                    <div class="SCpercentDiv">
                        <div class="SCpercentDivA">
                            <span class="SCpercentThreeDivColor">1003</span>
                            <img src="" alt="">
                            <span class="SCpercentThreeDivColor">12.07%</span>
                        </div>
                        <p class="SCpercentDivB SCpercentThreeDivColor">访客数</p>
                    </div>
                    <div class="SCpercentDiv">
                        <div class="SCpercentDivA">
                            <span class="SCpercentThreeDivColor">1003</span>
                            <img src="" alt="">
                            <span class="SCpercentThreeDivColor">12.07%</span>
                        </div>
                        <p class="SCpercentDivB SCpercentThreeDivColor">访客数</p>
                    </div>
                </div>
            </div>
            <div class="SCpercentCenterRight">
                <!--右边第一块-->
                <div class="SCpercentCenterRightOne">
                    <p>下单转化率</p>
                    <p>2.59%</p>
                </div>
                <!--右边第二块-->
                <div class="SCpercentCenterRightTwo">
                    <p>下单-支付转化率</p>
                    <p>92.31%</p>
                </div>
                <!--右边第三块-->
                <div class="SCpercentCenterRightThree">
                    <p>支付转化率</p>
                    <p>2.49%</p>
                </div>
            </div>
        </div>
        <!--转化率更新时间-->
        <div class="SCpercentbottom">
            <span>更新时间：</span>
            <span>2019-07-25 20:24</span>
        </div>
    </div>
</template>

<script>
    export default {
        name: "SCpercent",
        data(){
            return {
                // 控制第二块中日期选择框的显示隐藏
                isSCPercentDataS: false,

            }
        },
        methods: {
            // 第二块中点击日期,事件
            showDataS(){
                this.isSCPercentDataS = !this.isSCPercentDataS;
            },
            // 第二块中,选择日期事件
            SCPercentDataS(index){
                alert(index);
                this.isSCPercentDataS = false;
            },
        },
        mounted(){
            var that = this;
            $(document).bind("click",function(e){
                // 如果点击的不是日期,关闭第二块中的日期选择框
                if(e.target.getAttribute('data-isshow') != 1){
                    that.isSCPercentDataS = false;
                }
            })
        }
    }
</script>

<style scoped>
    /*@import "./../../../static/testIndex.css";*/
    /* 转化率第一块 */
    .SCpercentHeader{
        width:1015px;
        height:33px;
        line-height:33px;
        background:#FFFFFF;
        font-size:14px;
        font-weight:400;
        color:#1296DB;
        text-indent: 28px;
    }
    .SCpercentHeader span{
        color:#1296DB;
    }
    /* 转化率第二块 */
    .SCpercentTwo{
        width:1015px;
        height:40px;
        line-height: 40px;
        background:#FFFFFF;
        font-size:19px;
        font-weight:400;
        color:rgba(0,0,0,1);
        text-indent: 28px;
        margin: 20px 0 15px;
        position: relative;
    }


    /* 第二块,中间日期 */
    .SCpercentTwoB{
        display: inline-block;
        width: 75px;
        height: 26px;
        line-height: 26px;
        font-size:19px;
        text-align: center;
        text-indent: 0;
        background: #EEEEEE;
        float: right;
        font-family:"PingFang-SC-Regular";
        font-weight:400;
        color:#A0A0A0;
        margin-right: 240px;
        margin-top: 8px;
        cursor: pointer;
    }
    .SCpercentTwoB img{
        display: inline-block;
        width: 14px;
        height: 8px;
        margin-bottom: 3px;
    }
    /* 第二块,最后时间 */
    .SCpercentTwoC{
        line-height: 40px;
        font-size:16px;
        font-family:"PingFang-SC-Regular";
        font-weight:400;
        color:rgba(160,160,160,1);
        position: absolute;
        right: 20px;
    }
    /* 第二块日期选择显示框 */
    .SCPercentDataS{
        position: absolute;
        width: 65px;
        padding: 0 5px;
        background: #FFFFFF;
        border: 1px solid #E5E5E5;
        padding-top: 5px;
        padding-bottom: 5px;
        right: 240px;
    }
    .SCPercentDataS p{
        height: 20px;
        margin-top: 2px;
        line-height: 20px;
        font-size:14px;
        text-indent: 0;
        text-align: right;
        font-family:"PingFang-SC-Regular";
        font-weight:400;
        color:#A0A0A0;
        cursor: pointer;
        position: relative;
        z-index: 10;
    }
    .SCPercentDataS p:hover{
        color: #ffffff;
        background: orange;
    }


    /* 转化率第三块,中心内容 */
    .SCpercentCenter{
        width: 1015px;
        height: 290px;
        border-bottom: 1px solid #000000;
        background: url("./../../assets/img/shopCenter/SCpercentCenterBJ.png");
        background-size: 1000px 290px;
    }
    /*************************** 内容小块左边部分 */
    .SCpercentCenterLeft{
        padding: 47px 0 0 60px;
        float: left;
    }
    /* 转化率中心内容划分小块 */
    .SCpercentDiv{
        display: inline-block;
        height: 59px;
        text-indent: 5px;
        margin-right: 20px;
    }
    .SCpercentDivA{
        height: 25px;
        line-height: 25px;
        margin-top: 10px;
    }
    .SCpercentDivA span:nth-child(1){
        font-size:16px;
        font-family:"PingFang-SC-Heavy";
        font-weight:800;
        /* color:rgba(0,173,255,1); */
    }
    .SCpercentDivA img{
        display: inline-block;
        width: 9px;
        height: 11px;
        background: orange;
        margin: 0 5px;
    }
    .SCpercentDivA span:nth-child(3){
        font-size:14px;
        font-family:"PingFang-SC-Heavy";
        font-weight:400;
        /* color:#00ADFF; */
    }
    .SCpercentDivB{
        font-size:11px;
        font-family:"PingFang-SC-Regular";
        font-weight:400;
        /* color:#00ADFF; */
    }

    /* 改变行里的颜色 */
    .SCpercentOneDivColor{
        color: #00ADFF;
    }
    .SCpercentTwoDivColor{
        color: #01520E;
    }
    .SCpercentThreeDivColor{
        color: #FF7F00;
    }


    /*************************** 内容小块右边部分 */
    .SCpercentCenterRight{
        float: right;
        width: 350px;
        height: 250px;
        position: relative;
        /* background: orange; */
    }
    .SCpercentCenterRight div{
        display: inline-block;
        position: absolute;
        font-size:12px;
        font-weight:400;
    }
    /* 右边第一个小块 */
    .SCpercentCenterRightOne{
        top: 95px;
        left: 130px;
    }
    /* 右边第二个小块 */
    .SCpercentCenterRightTwo{
        top: 150px;
        left: 110px;
    }
    /* 右边第三个小块 */
    .SCpercentCenterRightThree{
        top: 175px;
        left: 260px;
    }
    .SCpercentCenterRightOne p, .SCpercentCenterRightThree p{
        color: #0D7600;
    }
    .SCpercentCenterRightTwo p{
        color: #DE6F00;
    }
    .SCpercentCenterRight div p:nth-child(2){
        font-size:12px;
        color: #000000;
    }




    /* 转化率更新时间 */
    .SCpercentbottom{
        line-height: 40px;
        font-size:14px;
        font-weight:400;
        color:#787878;
        background: #ffffff;
        text-indent: 28px;
    }


    #Block{
        display: block;
    }
    #None{
        display: none;
    }

</style>
